<template>
  <!-- 订单物流组件 -->
  <div v-loading="loading" element-loading-text="加载中" class="pad-r-20 scroll-layer-box">
    <el-timeline>
      <el-timeline-item type="primary" v-for="(activity, index) in traces" :key="index" :timestamp="activity.timestamp">
        {{activity.content}}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
  import { queryExpress, queryExpressByApartOrderId } from '@/api/common/common'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 订单id
      orderId: {
        type: String
      },
      // 子订单id
      apartOrderId: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    data() {
      return {
        // 物流信息
        traces: [],
        loading: false
      }
    },
    created() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.traces = []
        this.loading = true
        if (this.apartOrderId) {
          queryExpressByApartOrderId(this.apartOrderId).then(response => {
            this.queryAfterCall(response)
          })
        } else {
          queryExpress(this.orderId).then(response => {
            this.queryAfterCall(response)
          })
        }
      },
      // 后处理
      queryAfterCall(response) {
        this.loading = false
        if (response.isError || !response.data.Traces || response.data.Traces.length === 0) {
          this.$alert('未查到相关物流动态', '物流动态', {
            confirmButtonText: '确定',
            callback: () => {
              this.$emit('callback')
            }
          })
          return
        }
        const Traces = response.data.Traces
        Traces.forEach(trace => {
          this.traces.push({
            'timestamp': trace.AcceptTime,
            'content': trace.AcceptStation
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>